<template>
    <div class="quote">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/aptitude'">&nbsp;资质服务 ></router-link>
            <span class="blue-c">&nbsp;{{cate.name}}</span>
        </div>

        <!-- 背景图 -->
        <div class="quote-bg flex">
            <img :src="banner.content" alt="">
        </div>

        <div class="quote-box flexv">
            <!-- 资质办理报价 -->
            <ul class="flexv" v-if="cate_id == 1">
                <li class="flex">
                    <span class="quote-box-name">公司名称</span>
                    <input type="text" class="flex1" v-model="cname">
                </li>
                <li class="flex">
                    <span class="quote-box-name">公司地址</span>
                    <area-select v-model="selected" size="small" type="text" :data="pca" :placeholders="['选择省份','选择城市']" class="flex1 flex jus-b"></area-select>
                </li>
                <li class="flex">
                    <span class="quote-box-name">资质类型</span>
                    <input type="text" class="flex1 company tr" @click="picktype" readonly placeholder="请选择" v-model="type" >
                </li>
                <li class="flex">
                    <span class="quote-box-name">证书类型</span>
                    <!-- 种类 -->
                    <input type="text" class="flex1 level tr" @click="pickLevel" readonly placeholder="请选择" v-model="level_item" >
                    <!-- 等级 -->
                    <input type="text" class="flex1 level tr" @click="pickTlevel" readonly placeholder="请选择" v-model="level" >
                </li>
            </ul>

            <!-- 资质托管 -->
            <ul class="flexv" v-if="cate_id == 3">
                <li class="flex">
                    <span class="quote-box-name">公司名称</span>
                    <input type="text" class="flex1" placeholder="请输入公司名称" v-model="cname">
                </li>
                <li class="flex">
                    <span class="quote-box-name">资质数量</span>
                    <input type="text" class="flex1" placeholder="请输入资质数量" v-model="qcounts">
                </li>
                <li class="flex">
                    <span class="quote-box-name">证书数量</span>
                    <input type="text" class="flex1" placeholder="请输入证书数量" v-model="ccounts">
                </li>
            </ul>


            <!-- 安许办理报价 -->
            <ul class="flexv" v-if="cate_id == 5">
                <li class="flex">
                    <span class="quote-box-name">公司名称</span>
                    <input type="text" class="flex1" v-model="cname">
                </li>
                <li class="flex">
                    <span class="quote-box-name">公司地址</span>
                    <area-select v-model="selected" size="small" type="text" :data="pca" :placeholders="['选择省份','选择城市']" class="flex1 flex jus-b"></area-select>
                </li>
                <li class="flex">
                    <span class="quote-box-name">办理类型</span>
                    <input type="text" class="flex1 company tr" @click="pickDtype" readonly placeholder="请选择办理类型" v-model="dtype" >
                </li>
                <li class="flex">
                    <span class="quote-box-name">资质情况</span>
                    <input type="text" class="flex1 company tr" @click="picksit" readonly placeholder="请选择资质情况" v-model="situation" >
                </li>
                <li class="flex">
                    <span class="quote-box-name">人员情况</span>
                    <input type="text" class="flex1 company tr" @click="pickpsit" readonly placeholder="请选择人员情况" v-model="psituation" >
                </li>
            </ul>

            <div class="sub-btna" @click="subForms">免费获取精准报价</div>
            
        </div>

        <!-- 类型弹窗 -->
        <van-popup v-model="ztype" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择资质类型</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in types" :key="index" @click="thisType(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': selec == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 办理类型弹窗 -->
        <van-popup v-model="dotype" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择办理类型</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in dtypes" :key="index" @click="thisDtype(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': dot == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 资质情况弹窗 -->
        <van-popup v-model="situa" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择资质情况</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in situas" :key="index" @click="thisSitua(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': sit == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 人员情况弹窗 -->
        <van-popup v-model="psitua" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择人员情况</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in psituas" :key="index" @click="thisPsitua(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': psit == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 种类弹窗 -->
        <van-popup v-model="zitem" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">请选择</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in items" :key="index" @click="thisLevel(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" :class="{'on': sitem == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>


        <!-- 等级弹窗 -->
        <van-popup v-model="zlevel" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">请选择</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in levels" :key="index" @click="thisTlevel(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" :class="{'on': slevel == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>


        <!-- 提交前登陆弹窗 -->
        <van-popup v-model="bfSub" :overlay="true" class="before-pop flex flexv">
            <div class="before-pop-head tc">登录建筑工程平台</div>
            <div class="before-pop-login flex flexv">
                <div class="flex before-input">
                    <input type="text" class="flex1" placeholder="请输入您的手机号" v-model="tel">
                </div>

                <div class="flex before-input">
                    <input type="text" class="before-code" placeholder="请输入验证码" v-model="code">
                    <span class="blue-c flex1 tc" v-if="unget" @click="getCode(60)">获取验证码</span>
                    <span class="blue-c flex1 tc" v-else>{{times + 'S' + ' 后重新获取'}}</span>
                </div>
            </div>
            <div class="login-btn" @click="subAll">登录</div>
        </van-popup>

        <pub-foot index="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Toast, Area, Popup, Picker } from 'vant';
import { pca } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import { AreaSelect } from 'vue-area-linkage';

Vue.use(Area).use(Popup).use(Picker).use(AreaSelect);
export default {
    data(){
        return{
            cate: [], //栏目(1资质办理报价、3资质托管、5安许办理报价)
            banner:[], //背景图
            cate_id: null, //栏目id（1,3,5）
            cname: null, // 公司名称
            type: null, // 资质类型
            dtype: null, // 办理类型
            dtype_id: null, // 办理类型id
            situation: null, // 资质情况
            situation: null, // 资质情况id
            qcounts: null, // 资质数量
            ccounts: null, // 证书数量
            psituation_id: null, // 人员情况
            psituation_id: null, // 人员情况id
            type_id: 1, // 资质服务类型id
            items: [], // 资质种类列表
            levels: [], // 等级列表
            types: [], // 类型列表
            dtypes: [], // 办理类型列表
            situas: [{name: '已具备', id: 1},{name: '暂无', id: 2}], // 资质情况列表
            psituas: [{name: '已具备', id: 1},{name: '暂无', id: 2}], // 人员情况列表
            ztype: false, //是否显示类型弹窗
            dotype: false, //是否显示办理类型弹窗
            situa: false, //是否显示资质情况弹窗
            psitua: false, //是否显示人员情况弹窗
            zlevel: false, //是否显示等级弹窗
            zitem: false, //是否显示种类弹窗
            province: null, // 要提交的省份
            city: null, // 要提交的城市
            selected: [], // 选择的地址数据
            pca: pca, // 省市区数据
            selec: -1, // 选中下标
            dot: -1, // 选中下标
            sit: -1, // 选中下标
            psit: -1, // 选中下标
            sitem: -1, // 选中下标
            slevel: -1, // 选中下标
            level_item: null, //种类
            level_item_id: null, //种类id
            situa_id: null, //选中办理类型id
            level: null, // 等级
            level_id: null, // 等级id
            bfSub: false, // 提交前登陆弹窗
            tel: null, // 手机号
            code: null, // 验证码
            unget: true, // 还未获取验证码？
            situation: null, // 资质情况
            psituation: null, // 人员情况
            times: '60', // 倒计时
        }
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubHead,
        pubFoot,
        'van-area': Area,
        'van-popup': Popup,
        'van-picker': Picker,
    },
    watch: {
        qcounts(newVal, oldVal){
            if (!(/^[0-9]*$/).test(this.qcounts)) {
                this.qcounts = null
            }
        },
        ccounts(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.ccounts)){
                this.ccounts = null
            }
        },
        tel(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.tel)){
                this.tel = null
            }
        },
        code(newVal, oldVal){
            if (!(/^[A-Za-z0-9]+$/).test(this.code)) {
                this.code = null
            }
        }
    },
    created(){
        const item_id = this.$route.params.id
        this.cate_id = item_id;
        this.type_id = item_id;
        this.getData(item_id);
    },
    methods: {
        getData(val){
            Toast.loading('请稍后...')
            let urL = '';
            if(val == 1){
                //资质办理报价
                urL = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=handleInfo'
            }else if(val == 5){
                // 安许办理报价
                urL = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=offer'
            }else if(val == 3){
                // 资质托管
                urL = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=trusteeship'
            }
            this.axios.get(urL, {
                params: {
                    uid: this.$store.state.user.uid,
                    cate_id: val,
                    type: this.type_id

                }
            }).then(res => {
                if (res.data.code == 200) {
                    const data = res.data.data;
                    this.cate = data.InfoCate;
                    this.banner = data.ad;
                    this.types = data.info;
                    this.dtypes = data.handle;
                    this.levels = data.info_level;
                    Toast.clear()
                } else {
                    Toast.clear();
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
        // 公司地址
        pickarea(){
            this.area = true;
        },
        // 资质类型
        picktype(){
            this.ztype = true;
        },
        // 选择类型
        thisType(index){
            this.selec = index;
            this.ztype = false;
            this.type_id = this.types[index].id;
            this.type = this.types[index].name;
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=handleInfo', {
                params: {
                    uid: this.$store.state.user.uid,
                    type: 2,
                    aptitude_id: this.type_id,
                    cate_id: this.cate_id,
                }
            }).then(res => {
                if(res.data.code == 200){
                    this.items = res.data.data.info;
                }
            })
        },
        // 种类弹窗
        pickLevel(){
            this.zitem = true;
        },
        // 办理类型弹窗
        pickDtype(){
            this.dotype = true
        },
        // 资质情况弹窗
        picksit(){
            this.situa = true
        },
        // 人员情况弹窗
        pickpsit(){
            this.psitua = true
        },
        // 等级弹窗
        pickTlevel(){
            this.zlevel = true
        },
        // 选择种类
        thisLevel(index){
            this.sitem = index;
            this.level_item = this.items[index].name;
            this.level_item_id = this.items[index].id;
            this.zitem = false;
        },
        // 选择等级
        thisTlevel(index){
            this.slevel = index;
            this.level = this.levels[index].name;
            this.level_id = this.levels[index].id;
            this.zlevel = false;
        },
        // 选择办理类型
        thisDtype(index){
            this.dot = index;
            this.dtype = this.dtypes[index].name;
            this.dtype_id = this.dtypes[index].id;
            this.dotype = false;
        },
        // 选择资质情况
        thisSitua(index){
            this.sit = index;
            this.situation = this.situas[index].name;
            this.situation_id = this.situas[index].id;
            this.situa = false;
        },
        // 选择人员情况
        thisPsitua(index){
            this.psit = index;
            this.psituation = this.psituas[index].name;
            this.psituation_id = this.psituas[index].id;
            this.psitua = false;
        },
        // 提交前登陆
        subForms(){
            const that = this;
            if(!this.cname){
                Toast({
                    duration: 1800,
                    message: '请输入公司名称'
                })
                return
            }
            if (this.cate_id == 1) {
                if (this.selected.length < 1) {
                    Toast({
                        duration: 1800,
                        message: '请选择公司地址'
                    })
                    return
                }
                if(!this.type) {
                    Toast({
                        duration: 1800,
                        message: '请选择资质类型'
                    })
                    return
                }
                if(!this.level_item) {
                    Toast({
                        duration: 1800,
                        message: '请选择资质等级'
                    })
                    return
                }
            }else if (this.cate_id == 3) {
                if (!this.qcounts) {
                    Toast({
                        duration: 1800,
                        message: '请输入资质数量'
                    })
                    return
                }
                if (!this.ccounts) {
                    Toast({
                        duration: 1800,
                        message: '请输入证书数量'
                    })
                    return
                }
            }else if (this.cate_id == 5) {
                if (this.selected.length < 1) {
                    Toast({
                        duration: 1800,
                        message: '请选择公司地址'
                    })
                    return
                }
                if (!this.dtype) {
                    Toast({
                        duration: 1800,
                        message: '请办理类型'
                    })
                    return
                }
                if (!this.situation) {
                    Toast({
                        duration: 1800,
                        message: '请选择资质情况'
                    })
                    return
                }
                if (!this.psituation) {
                    Toast({
                        duration: 1800,
                        message: '请选择人员情况'
                    })
                    return
                }
            }
            this.bfSub = true;
        },
        // 获取验证码
        getCode(val){
            if (this.unget) {
                if (!this.tel) {
                    Toast({
                        duration: 1800,
                        message: '请输入手机号！'
                    })
                    return
                }
                if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                    Toast({
                        duration: 1800,
                        message: '请输入正确的手机号！'
                    })
                    return
                }
                this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=MsgCode&a=sendCode', {
                    params: {
                        mobile: this.tel
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.unget = false;
                        setInterval(() => {
                            val--;
                            this.times = val;
                            if (val <=0) {
                                this.unget = true;
                                this.times = null;
                            }
                        }, 1000)
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    } else {
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    }
                })
            } else {
                Toast({
                    duration: 1800,
                    message: '请稍后再试！'
                })
            }
        },
        // 提交表单
        subAll(){
            let url = '';
            let datas = {};
            if(this.cate_id == 1){
                url = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=handles';
                datas = {
                    uid: this.$store.state.user.uid,
                    province: this.selected[0],
                    city: this.selected[1],
                    cate_id: this.cate_id,
                    company_name: this.cname,
                    aptitude_id: this.type_id,
                    cate_id: this.cate_id,
                    cercate_id: this.level_id ? this.level_id : 1,
                    level_id: this.level_item_id,
                    mobile: this.tel,
                    code: this.code
                }
            }else if(this.cate_id == 3){
                url = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=trList';
                datas = {
                    uid: this.$store.state.user.uid,
                    company_title: this.cname,
                    quali_number: this.qcounts,
                    person_number: this.ccounts,
                    mobile: this.tel,
                    code: this.code
                }
            }else if(this.cate_id == 5){
                url = 'http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=offerList';
                datas = {
                    uid: this.$store.state.user.uid,
                    province: this.selected[0],
                    city: this.selected[1],
                    company_name: this.cname,
                    aptitude_id: this.dtype_id,
                    manage: this.situation_id,
                    person: this.psituation_id,
                    mobile: this.tel,
                    code: this.code
                }
            }
            if (!this.tel) {
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return
            }
            if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if (!this.code) {
                Toast({
                    duration: 1800,
                    message: '请输入验证码'
                })
                return
            }
            this.axios.get(url, {
                params: datas
            }).then(res => {
                if (res.data.code == 200) {
                    this.bfSub = false;
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    setTimeout(() => {
                        this.$router.go(-1);
                    },2000)
                } else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })                    
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.quote{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 头部
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        a,span{
            color: #999;
            font-weight: bold;
        }
    }
    // 背景图
    .quote-bg {
        width: 100%;
        height: 2.8rem;
    }
    // 表单
    .quote-box{
        width: 100%;
        min-height: 6.72rem;
        padding: 0.3rem 0.24rem;
        font-size: 0.26rem;
        background-color: #fff;
        li {
            width: 100%;
            height: 0.65rem;
            margin-bottom: 0.15rem;
            .quote-box-name{
                width: 1.5rem;
                height: 0.65rem;
                border-radius: 0.1rem;
                line-height: 0.65rem;
                text-align: center;
                font-weight: bold;
                color: #1f78ff;
                background-color: #dcecff;
            }
            input {
                margin-left: 0.15rem;
                padding: 0 0.6rem 0 0.2rem;
                border-radius: 0.1rem;
                background-color: #f5f5f5;
            }
            .small{
                border: none;
            }
            .company{
                background: url('~@/assets/down-ico.png') no-repeat 96% center #f5f5f5;
                background-size: 0.24rem;
            }
            .level{
                width:2.6rem;
                background: url('~@/assets/down-ico.png') no-repeat 96% center #f5f5f5;
                background-size: 0.24rem;
            }
        }
    }
    // 弹窗
    .area-pop{
        width: 4.9rem;
        height: 5rem;
        margin: auto;
        padding: 0.44rem;
        z-index: 10;
        border-radius: 0.2rem;
        background-color: #fff;
        .type-pop-head{
            height: 0.4rem;
            font-size: 0.34rem;
            line-height: 0.4rem;
            font-weight: bold;
            text-align: center;
            color: #333;
        }
        .type-pop-box{
            width: calc(100% - 0.84rem);
            position: absolute;
            z-index: 20;
            top: 0.84rem;
            bottom: 0.44rem;
            overflow: auto;
            .type-pop-list {
                width: 100%;
                height: 0.9rem;
                border-bottom: 1px solid #dbdbdb;
                font-size: 0.28rem;
                line-height: 0.9rem;
                color: #333;
                .point{
                    width: 0.34rem;
                    height: 0.34rem;
                    margin: auto 0;
                    border-radius: 100%;
                    border: 1px solid #999;
                }
                .on{
                    border-color: #1f78ff;
                    i{
                        width: 0.2rem;
                        height: 0.2rem;
                        border-radius: 100%;
                        background-color: #1f78ff;
                    }
                }
            }
            .type-pop-list:last-child{
                border-bottom: none;
            }
        }
    }
    // 提交弹窗
    .before-pop{
        width: 5.6rem;
        height: 4.72rem;
        margin: auto;
        padding: 0.44rem;
        border-radius: 0.2rem;
        font-size: 0.26rem;
        background-color: #fff;
        .before-pop-head{
            font-size: 0.34rem;
            font-weight: bold;
            line-height: 120%;
            color: #333;
        }
        .before-pop-login{
            margin-top: 0.6rem;
            .before-input{
                width: 4.72rem;
                height: 0.7rem;
                margin-bottom: 0.15rem;
                padding: 0 0.3rem;
                border: 1px solid #dbdbdb;
                line-height: 0.7rem;
                border-radius: 0.1rem;
            }
            .before-code{
                width: 2rem;
            }
        }
        .login-btn {
            width: 4.72rem;
            height: 0.7rem;
            margin-top: 0.1rem;
            font-size: 0.26rem;
            line-height: 0.7rem;
            text-align: center;
            color: #fff;
            border-radius: 0.1rem;
            background-color: #1f78ff;
        }
    }
    // 提交
    .sub-btna{
        width: 7rem;
        height: 0.8rem;
        margin: 0.35rem auto 0;
        border-radius: 0.1rem;
        font-size: 0.26rem;
        line-height: 0.8rem;
        text-align: center;
        color: #fff;
        background-color: #1f78ff;
    }
}
</style>
